<script setup>
import FanImage from '..'
import Lazyload from '../../lazyload'

if (window.app && !window.lazyloadRegistered) {
	window.app.use(Lazyload)
	window.lazyloadRegistered = true
}
</script>

<template>
	<demo-block title="基础用法">
		<FanImage
			style="margin: 15px"
			src="https://img.dac6.cn/fre/byn-website/%E5%BF%85%E5%BA%94%E9%B8%9Flogo%20(1)%403x.png"
		></FanImage>
	</demo-block>

	<demo-block title="指定宽度">
		<FanImage
			style="margin: 15px"
			width="200"
			src="https://img.dac6.cn/fre/byn-website/%E5%BF%85%E5%BA%94%E9%B8%9Flogo%20(1)%403x.png"
		></FanImage>
	</demo-block>

	<demo-block title="指定比例与缩放模式">
		<FanImage
			style="margin: 15px"
			width="200"
			:aspect-ratio="1"
			mode="aspectFit"
			src="https://img.dac6.cn/fre/byn-website/%E5%BF%85%E5%BA%94%E9%B8%9Flogo%20(1)%403x.png"
		></FanImage>
	</demo-block>

	<demo-block title="LazyLoad">
		<FanImage
			style="margin: 100px 15px"
			lazyLoad
			src="https://img.dac6.cn/fre/byn-website/%E5%BF%85%E5%BA%94%E9%B8%9Flogo%20(1)%403x.png"
		></FanImage>
		<FanImage
			style="margin: 15px"
			lazyLoad
			src="https://img.dac6.cn/fre/byn-website/%E5%BF%85%E5%BA%94%E9%B8%9Flogo%20(1)%403x.png"
		></FanImage>
	</demo-block>
</template>
